import 'package:amoy_ticket/utils/router/getRouteConfig.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'coupon_logic.dart';

class CouponPage extends StatefulWidget {
  CouponPage({Key? key}) : super(key: key);

  @override
  State<CouponPage> createState() => _CouponPageState();
}

class _CouponPageState extends State<CouponPage>
    with SingleTickerProviderStateMixin {
  final logic = Get.put(CouponLogic());

  @override
  void initState() {
    super.initState();
    logic.tabController = TabController(length: logic.tabs.length, vsync: this);
    logic.currentTab.value = logic.tabs[0];
    logic.tabController.addListener(() {
      if (logic.tabController.indexIsChanging) {
        logic.currentIndex.value = logic.tabController.index;
        logic.currentTab.value = logic.tabs[logic.tabController.index];
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            '优惠券',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.sp),
          ),
          elevation: 0,
          actions: [
            GestureDetector(
              child: Padding(
                padding: EdgeInsets.only(right: 10.w, top: 12.w),
                child: Text(
                  '添加新券',
                  style: TextStyle(color: Colors.red, fontSize: 14.sp),
                ),
              ),
              onTap: () {
                Get.defaultDialog(title: 'hello');
              },
            ),
          ],
        ),
        body: Column(
          children: [
            Expanded(
              child: Container(
                color: Color(0xFFf5f6f8),
                child: Column(
                  children: [
                    Container(
                      color: Colors.white,
                      child: TabBar(
                        dragStartBehavior: DragStartBehavior.start,
                        key: GlobalKey(),
                        controller: logic.tabController,
                        labelColor: Color(0xFF30333d),
                        // indicator: RoundUnderlineTabIndicator(
                        //     borderSide:
                        //         BorderSide(width: 3.0, color: Colors.red),
                        //     width: 20.w),
                        unselectedLabelColor: Color(0xFFa1a4ad),
                        indicatorSize: TabBarIndicatorSize.label,
                        labelStyle: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 13.sp),
                        unselectedLabelStyle: TextStyle(fontSize: 13.sp),
                        tabs: logic.tabs.map((e) {
                          return Obx(
                            () => Tab(
                              // text: e,
                              child: RichText(
                                text: TextSpan(
                                  text: e,
                                  style: TextStyle(
                                    fontSize: 13.sp,
                                    color: Colors.black,
                                    fontWeight: logic.currentTab.value == e
                                        ? FontWeight.bold
                                        : FontWeight.normal,
                                  ),
                                  children: [
                                    TextSpan(
                                      text: ' ${logic.tabsNum[e]}',
                                      style: TextStyle(color: Colors.grey),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          );
                        }).toList(),
                      ),
                    ),
                    Expanded(
                      child: TabBarView(
                        physics: new NeverScrollableScrollPhysics(),
                        controller: logic.tabController,
                        children: [
                          _movieTabView(),
                          _movieTabView(),
                          _movieTabView(),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
            Obx(
              () => Container(
                padding: EdgeInsets.only(
                    top: 10.h, bottom: ScreenUtil().bottomBarHeight),
                height: 60.h,
                color: Colors.white,
                child: Row(
                  mainAxisAlignment: logic.currentIndex.value == 0
                      ? MainAxisAlignment.spaceBetween
                      : MainAxisAlignment.center,
                  children: [
                    Visibility(
                      visible: logic.currentIndex.value == 0,
                      child: _button('优惠券订单', () {
                        Get.toNamed(RouteConfig.purchaseRecordPage);
                      }),
                    ),
                    _button('查看无效券', () {
                      Get.toNamed(RouteConfig.invalidCouponPage);
                    }),
                  ],
                ),
              ),
            )
          ],
        ));
  }

  _movieTabView() {
    return Column(
      children: [
        SizedBox(
          height: 60.h,
        ),
        CachedNetworkImage(
          imageUrl:
              'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/people/coupon/empty_image2.png',
          fit: BoxFit.fill,
          width: 150.w,
        ),
        SizedBox(height: 20.h),
        Text(
          '暂无可用优惠券',
          style: TextStyle(color: Colors.grey, fontSize: 14.sp),
        )
      ],
    );
  }

  Widget _button(String label, Function() callBack) {
    return GestureDetector(
      onTap: callBack,
      child: Container(
        width: MediaQuery.of(context).size.width / 2,
        alignment: Alignment.topCenter,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              label,
              style: TextStyle(fontSize: 13.5.sp),
            ),
            Icon(
              Icons.chevron_right,
              size: 13.sp,
            )
          ],
        ),
      ),
    );
  }
}
